<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			.*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;/* 删除所有a标签 */
			}
			li{
				list-style: none;
			}
			.box1{
		        /* position: relative;
				top: 100px;
				left: 200px; */
				width: 600px;
				height: 600px;
				background-color: deeppink;
			}
			.box2{
				position: relative;
				top: 150px;
			    width: 150px;
				height: 200px;
				background-color:lawngreen;
				
			}
		
		.box3{
			position:absolute;
			top: 50px;
			left: 150px;
		    width: 200px;
			height: 200px;
			background-color:paleturquoise;
			z-index: 1;
		}
		.box4{
			position: absolute;
	
			top: 150;
		    width: 200px;
			height: 200px;
			background-color:burlywood;
		}
		.callme{
			position: fixed;
			right: 10px;
			top: 400;
		    width: 80px;
			height: 200px;
			background-color:aqua;
		}
		</style>
	</head>
	<body>
	<!-- 
	 标准流：默认的布局方式，标签按规定排序
	 浮动(flow)：可以让多个块级元素一行内排序显示
	 定位(position)：实现网页中元素精准定位
	 -->	
	 <!-- z-index:
	  层叠等级属性，用于-->
	<!-- <div class="box1">
		   <div class="box3"></div>
		   <div class="box4"></div> -->
		   <!-- 快速写盒子的便捷方式："."盒子名字，再tab键 例如：.callme ,按tab键--> 
	  <!-- </div>
	   <div class="box2"></div>
	   <div class="callme"></div> -->
	    <ul>
			<li>1</li>
			<li>2</li>
		</ul> 
	<!-- 定位:position
	1.定位模式：
	   静态定位static，默认的定位
	   相对定位relation:相较于自己的定位进行偏移,相对定位盒子不脱标(参照点是自己原来的位置移动)
	   绝对定位absolute：相较于有定位的父盒子进行偏移，如果父盒子都没有定位，则相较于body进行偏移
	    相对定位盒子不脱标，绝对定位的盒子脱标！
		经典的应用：
		   大相小绝(子绝父相)
	   固定定位fixed:相较于body进行偏移。位置固定不动
	2.偏移量：
	   top上，bottom下，left左，right右 -->
	 
	 
	 
	</body>
</html>
